<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="uct" uri="/WEB-INF/uct.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <%@ include file="/common/adminlte/common-js.jsp"%>
  <%@ include file="/common/adminlte/common-css.jsp"%>
  <script type="text/javascript" src="${ctx}/js/WdatePicker/WdatePicker.js"></script>
  <title>WHQ | 基础平台</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- top start -->
  <%@include file="/common/adminlte/top.jsp" %>
  <!-- top end -->
  <!-- left start -->
  <%@include file="/common/adminlte/left.jsp" %>
  <!-- left end-->

  <div class="content-wrapper">
  		<br/>
		<ol class="breadcrumb bgblue">
			<li>
				<span class="label label-danger font14" >客户管理</span>
			</li>
		</ol>
		
    <!-- Main start -->

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              			<center>
              				<div class="btn-group">
								<button class="btn btn-info" type="button" onclick="toAddOrg();">增加会员</button>
								<!-- <button class="btn btn-info" type="button" onclick="toAddOrg();">修改会员</button> -->
								<button class="btn btn-info" type="button" onclick="delOrg()();">删除会员</button>
				            	<button class="btn btn-info" type="button" onclick="refresh();">刷新</button>
			            	</div>					
            	</center>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example" class="table table-bordered table-hover dataTableList" >
                <thead>
                <tr>
                  <th>会员名称</th>
                  <th>会员全称</th>
                  <th>真实姓名</th>
                  <th>更新时间</th>
                  <th>会员类型</th>
                </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Main end -->
  </div>
  <!-- /.content-wrapper -->
  <!-- foot start -->
  <%@include file="/common/adminlte/foot.jsp" %>
  <!-- foot start -->
  <!-- right start -->
  <%@include file="/common/adminlte/right.jsp" %>
  <!-- right start -->
  
<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title">
							<font color="red">机构信息</font>&nbsp;
						</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form" id="orgForm">
							
							<input type="hidden" name="formToken" value="${formToken}" />
							<input name="deptName" id="deptName" type="hidden" value="${loginUser.deptCname}" />
							<input name="deptId" id="deptId" type="hidden" value="${loginUser.deptId}" />
							<input name="memberLevel" id="memberLevel" type="hidden" value="2" />
							<input name="editType" id="editType" type="hidden" value="1" />
							<input name="memberId" id="memberId" type="hidden" value="${param.memberId }" />
					        <div class="box-body" id="orgFormData">
					          <!-- Custom Tabs -->
					          <div class="nav-tabs-custom">
					            <ul class="nav nav-tabs">
					              <li class="active"><a href="#tab_1" data-toggle="tab">基本信息</a></li>
					              <li><a href="#tab_2" data-toggle="tab">联系信息</a></li>
					              <li><a href="#tab_3" data-toggle="tab">财务信息</a></li>
					              <li><a href="#tab_4" data-toggle="tab">银行信息</a></li>
					            </ul>
					            
					            
					            <div class="tab-content">
					              <div class="tab-pane active" id="tab_1">
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >会员账号</label>
					                  <div class="col-sm-8">
					                    <input type="text" id="memberEname" name="memberEname" class="form-control" required placeholder="必填项" >
										
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >会员全称</label>
					                  <div class="col-sm-8">
					                    <input type="text" id="memberCname" name="memberCname" class="form-control" required placeholder="必填项">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >会员简称</label>
					                  <div class="col-sm-8">
					                  <input type="text"  id="shortName" name="shortName" class="form-control" required placeholder="必填项">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >会员属性</label>
					                  <div class="col-sm-8">
					                  <input type="radio"  name="memberType" value="0" checked="checked" />个人
									  <input type="radio"  name="memberType" value="1" />机构
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >会员类型</label>
					                  <div class="col-sm-8">
					                  <span id="memberRoleArray" > </span>
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >注册时间</label>
					                  <div class="col-sm-8">
					                  <input type="text" class="form-control" 
										onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})"
										class="Wdate" id="regTime" name="regTime" value="">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >入会时间</label>
					                  <div class="col-sm-8">
					                  <input type="text" class="form-control" 
										onFocus="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,readOnly:true})"
										class="Wdate" id="str50_1" name="str50_1"
										value="">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >证件类型</label>
					                  <div class="col-sm-8">
					                   <select id="certType" name="certType" class="form-control" >
											<option value="">--请选择--</option>
										</select>
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >证件号码</label>
					                  <div class="col-sm-8">
					                  <input type="text" id="certNo" class="form-control"  name="certNo" value="">
					                  </div>
					                </div>
					              </div>
					              <!-- /.tab-pane -->
					              <div class="tab-pane" id="tab_2">
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >移动电话</label>
					                  <div class="col-sm-8">
					                   <input type="text"  id="mobile" name="mobile" class="form-control" required placeholder="必填项" >
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >固定电话</label>
					                  <div class="col-sm-8">
					                   <input type="text" id="phone" name="phone" class="form-control" required placeholder="必填项">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >邮箱</label>
					                  <div class="col-sm-8">
					                   <input type="text" id="email" name="email" class="form-control" required placeholder="必填项">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-2 control-label" >邮政编码</label>
					                  <div class="col-sm-8">
					                   <input type="text"  id="str50_15" name="str50_15" class="form-control" required placeholder="必填项">
					                  </div>
					                </div>
					              </div>
					              <!-- /.tab-pane -->
					              <div class="tab-pane" id="tab_3">
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >个人收入情况</label>
					                  <div class="col-sm-8">
					                  	<select id="str50_14" name="str50_14" style="text-align: center;" class="form-control" >
											<option value="">--请选择--</option>
											<option value="10万以下">10万以下</option>
											<option value="10万-30万">10万-30万</option>
											<option value="30万-50万">30万-50万</option>
											<option value="50万-100万">50万-100万</option>
											<option value="100万-300万">100万-300万</option>
											<option value="300万-500万">300万-500万</option>
											<option value="500万-800万">500万-800万</option>
											<option value="800万-1000万">800万-1000万</option>
											<option value="1000万以上">1000万以上</option>
										</select>
					                  </div>
					                 </div>
					                 <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >家庭合计收入情况</label>
					                  <div class="col-sm-8">
										<select id="str50_16" name="str50_16" style="text-align: center;" class="form-control" >
											<option value="">--请选择--</option>
											<option value="10万以下">10万以下</option>
											<option value="10万-30万">10万-30万</option>
											<option value="30万-50万">30万-50万</option>
											<option value="50万-100万">50万-100万</option>
											<option value="100万-300万">100万-300万</option>
											<option value="300万-500万">300万-500万</option>
											<option value="500万-800万">500万-800万</option>
											<option value="800万-1000万">800万-1000万</option>
											<option value="1000万以上">1000万以上</option>
										</select>
					                  </div>
					                 </div>
					                 <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >个人金融净资产情况</label>
					                  <div class="col-sm-8">
										<select id="str50_17" name="str50_17" style="text-align: center;" class="form-control" >
											<option value="">--请选择--</option>
											<option value="10万以下">10万以下</option>
											<option value="10万-30万">10万-30万</option>
											<option value="30万-50万">30万-50万</option>
											<option value="50万-100万">50万-100万</option>
											<option value="100万-300万">100万-300万</option>
											<option value="300万-500万">300万-500万</option>
											<option value="500万-800万">500万-800万</option>
											<option value="800万-1000万">800万-1000万</option>
											<option value="1000万以上">1000万以上</option>
										</select>
					                  </div>
					                 </div>
					                 <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >家庭金融净资产情况</label>
					                  <div class="col-sm-8">
										<select id="str50_18" name="str50_18" style="text-align: center;" class="form-control" >
											<option value="">--请选择--</option>
											<option value="10万以下">10万以下</option>
											<option value="10万-30万">10万-30万</option>
											<option value="30万-50万">30万-50万</option>
											<option value="50万-100万">50万-100万</option>
											<option value="100万-300万">100万-300万</option>
											<option value="300万-500万">300万-500万</option>
											<option value="500万-800万">500万-800万</option>
											<option value="800万-1000万">800万-1000万</option>
											<option value="1000万以上">1000万以上</option>
										</select>
					                  </div>
					                 </div>
					              </div>
					              <div class="tab-pane" id="tab_4">
					               	<div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >银行结算账户户名</label>
					                  <div class="col-sm-8">
										<input type="text" class="form-control"  style="width: 150px;" id="str50_20" name="str50_20" value="">
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >开户银行</label>
					                  <div class="col-sm-8">
										<select id="str100_7" class="form-control"  name="str100_7" style="width: 150px;text-align: center;">
											<option value="">--请选择--</option>
										</select>
					                  </div>
					                </div>
					                <div class="form-group">
					                  <label for="inputOrgCname" class="col-sm-4 control-label" >银行账号</label>
					                  <div class="col-sm-8">
										<input type="text" class="form-control" style="width: 150px;" id="str100_8" name="str100_8" value="">
					                  </div>
					                </div>
					              </div>
					              <!-- /.tab-pane -->
					            </div>
					            <!-- /.tab-content -->
					          </div>
					          <!-- nav-tabs-custom -->
					        </div>
			                
			                
			                <div class="box-footer">
				                <button type="button" class="btn btn-primary pull-left" onclick="cannel();">取消</button>
				                <button type="button" class="btn btn-primary pull-right" onclick="addOrg('orgForm');">提 交</button>
				            </div>
						</form>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>		
</div>  
  
  
  
</body>



<script>
var search_url = "${ctx}/admin/member/queryMemberList.action";
var add_url = "${ctx}/admin/member/add.action";
var del_url = "${ctx}/admin/member/delete.action";
var view_url = "${ctx}/uct/org/getById.action";
var table;
$(function () {
	//初始化数据字典，无论新增或修改
	var dictUrl = "${ctx}/dict/item/list!tree.action";
	DictUtil.getCheckboxList("#memberRoleArray",'memberRoles', dictUrl, {cateEname:"memberType"});
	DictUtil.getDictExtList("#certType", dictUrl, {cateEname:"certType"});//证件类型
	DictUtil.getDictExtList("#str50_4", dictUrl, {cateEname:"education"});//教育情况
	DictUtil.getDictExtList("#str100_7", dictUrl, {cateEname:"bank"});//开户银行
	
	table = initTable();
	
	$('#example tbody').on('click','tr', function () {
	     if ( $(this).hasClass('selected') ) {
	            //$(this).removeClass('selected');
	        }
	        else {
	            table.$('tr.selected').removeClass('selected');
	            $(this).addClass('selected');
	        }
	     
     	//one
	 	//console.log($('tr.selected td').eq(1).html())
     	//two
	 	//console.log(table.$('tr.selected').find('td').eq(1).html());

	} );

	

	
	
  });

//设置模态框隐藏事件钩子  
$( '#my_modal' ).on( 'hide.bs.modal' ,function(e){  
	cleanData('orgFormData');
}); 

//设置模态框隐藏事件钩子  
$( '#my_modal' ).on( 'show.bs.modal' ,function(e){  
	$.ajax({
	    type:'post',
	    url:'${ctx}/sendPage/token?token=true',
	    dataType:'json',
	    success: function(myData){
	    	//console.log(myData);
			 $('#formToken').val(myData);
	  	}
	});	
}); 

function cleanData(id){
	$(':input','#'+id)  
	 .not(':button, :submit, :reset, :hidden')  
	 .val('')  
	 //.removeAttr('checked')  
	 .removeAttr('selected'); 
}


function initTable(){
  var table = $('#example').DataTable({
		   "language": {"url": "${ctx}/plugins/datatables/dataTables_zh-CN.js"},//处理国际化
	        ajax: {
	        	"url":search_url,
	        	"dataSrc": "rows"
	        },
	        columns: [
	            { "data": "memberEname" },
	            { "data": "memberCname" },
	            { "data": "shortName" },
	            { "data": "updateTime" },
	            { "data": "memberRoles" }
	        ],
	        fnRowCallback: function( nRow, aData, iDisplayIndex ) {
				if ( aData.subCount > 0  )
				{
					$('td', nRow).eq(3).html(aData.subCount);
				}else{
					$('td', nRow).eq(3).html('0');
				};
				if ( aData.orgStatus =='1' )
				{
					$('td', nRow).eq(6).html('<font color=blue>启用</font>');
				}else{
					$('td', nRow).eq(6).html('<font color=blue>停用</font>');
				};
				return nRow;
			}
	    });
  			return table;
  }
  
function getSelected(table){
	//console.log(table.rows('.selected').data());
	var obj =  table.rows('.selected').data();
	if(obj.length>0){
		return obj[0].memberId;
	}
}  
  
function toAddOrg(){
	$('#my_modal').modal('show');
}


function toEditOrg(){
	
	var orgId  = getSelected(table);
	if(orgId =="undefined"){
		alert("请先选中一条数据！");
		return;
	}else{
		$.ajax({
		    type:'post',
		    url:view_url,
		    data:{'id':orgId},
		    dataType:'json',
		    success: function(myData){
				 FormUtil.fillData("#orgForm", myData);
				 $('#my_modal').modal('show');
		  	}
		});	
	}
	
	
	//$('#my_modal').modal('show');
	
	
	
}

function delOrg(){
	var orgId  = getSelected(table);
	if(orgId =="undefined"){
		alert("请先选中一条数据！");
		return;
	}else{
		$.ajax({
		    type:'post',
		    url:del_url,
		    data:{'memberId':orgId},
		    dataType:'json',
		    success: function(myData){
		    	if(myData.flag=='T'){
		    		alert("删除成功！");
		    		refresh();
		    	}

		  	}
		});	
	}

	
}

function addOrg(formId){
	
	if(!$("#" + formId)[0].checkValidity()){
		alert("请先完善必输项和必选项！");
		return ;
	}
	
	$.ajax({
	    type:'post',
	    url:add_url,
	    data:$("#"+formId).serialize(),
	    dataType:'json',
	    success: function(myData){
	    	//console.log(myData);
	    	if(myData.flag=='T'){
	    		alert("添加成功！");
	    		$('#my_modal').modal('hide');
	    		refresh();
	    	}

	  	}
	});	
	
	
}

function cannel(){
	$('#my_modal').modal('hide');

}

function refresh(){
    //window.location.reload();
    table.ajax.reload();
}


</script>




</html>
